<template>
	<div class="list">
		<div class="start">
			<p><span>全部目录/杂志目录&nbsp;</span>&nbsp;&nbsp;/杂志文章</p>
		</div>
		<div class="top">
			<div class="one">卷首语</div>


		</div>
		<div class="two" v-html="this.magazineHome.firstContent"></div>
		<footerA></footerA>
	</div>

</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'List',
		computed: {
			...mapState(['magazineHome'])
		},
		mounted() {
			// console.log(this.magazineHome)
		}
	}
</script>

<style scoped>
	.list {
		margin-top: 86px;
		width: 100vw;
	}

	.start {
		padding-top: 10px;
		margin-left: 12.5vw;
		height: 60px;
		border-bottom: 0.1px solid rgb(245, 245, 250);
	}

	.start>p>span {
		color: darkgray;
	}

	.list .top {
		width: 55vw;
		height: 40px;
		background-color: #FAFBFC;
		position: relative;
		margin: 40px auto;

	}

	.top>.one {
		text-align: center;
		position: absolute;
		width: 120px;
		line-height: 60px;
		top: -10px;
		left: 20vw;
		background-color: white;
		box-shadow: 0 0 1px 1px rgb(250, 250, 250);
		z-index: 10;
		font-size: 20px;
		color: #31475E;
		font-weight: 400;
	}

	.two {
		margin: 0 auto;
		width: 55vw;
		
		position: static;
	}
</style>
